var app = new Vue({
	el: '#app',
	data() {
		//用户登录输入验证
		//任意字符
		let letterRule = (rule, value, callback) => {
			let reg = /^[a-zA-Z0-9_-]{4,18}$/
			if (value === '') {
				callback(new Error('输入内容不能为空'));
			} else if (!reg.test(value)) {
				callback(new Error('请输入字母、数字、下划线'));
			} else {
				callback();
			}
		};
		//限制只能为数字
		let isNum = (rule, value, callback) => {
			let reg = /^[0-9]*$/
			if (value === '') {
				callback(new Error('输入内容不能为空'));
			}else if (!reg.test(value)) {
				callback(new Error('输入内容只能为数字'))
			}else{
				callback()
			}
		};
		return {
			canvas: null,
			context: null,
			stars: [], //星星数组
			shadowColorList: [
				"#39f",
				"#ec5707",
				"#b031d4",
				"#22e6c7",
				"#92d819",
				"#14d7f1",
				"#e23c66"
			], //阴影颜色列表
			directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
			speed: 50, //星星运行速度
			last_star_created_time: new Date(), //上次重绘星星时间
			Ball: class Ball {
				constructor(radius) {
					this.x = 0;
					this.y = 0;
					this.radius = radius;
					this.color = "";
					this.shadowColor = "";
					this.direction = "";
				}
				draw(context) {
					context.save();
					context.translate(this.x, this.y);
					context.lineWidth = this.lineWidth;
					var my_gradient = context.createLinearGradient(0, 0, 0, 8);
					my_gradient.addColorStop(0, this.color);
					my_gradient.addColorStop(1, this.shadowColor);
					context.fillStyle = my_gradient;
					context.beginPath();
					context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
					context.closePath();
					context.shadowColor = this.shadowColor;
					context.shadowOffsetX = 0;
					context.shadowOffsetY = 0;
					context.shadowBlur = 10;
					context.fill();
					context.restore();
				}
			}, //工厂模式定义Ball类
			width: window.innerWidth,
			height: window.innerHeight,
			//用户登录
			loading: false, //登陆状态
			loginForm: {
				studentId: "",
				passWord: ""
			},
			registerForm: {
				userName: "",
				studentId: "",
				passWord: "",
				phone: "",
				qq: ""
			},
			loginRules: { //登陆验证规则
				studentId: [{
						required: true,
						message: '请输入学号',
						trigger: 'blur'
					},
					{
						min: 10,
						max: 10,
						message: '长度为 10 个数字',
						trigger: 'blur'
					},
					{
						validator: isNum,
						// validator: letterRule,
						trigger: 'blur'
					}
				],
				passWord: [{
						required: true,
						message: '请输入身份证后六位',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 6,
						message: '长度为 6 个字符',
						trigger: 'blur'
					},
					{
						validator: letterRule,
						trigger: 'blur'
					}
				]
			},
			registerRules: { //登陆验证规则
				username: [{
					required: true,
					message: '请输入姓名',
					trigger: 'blur'
				},
					{
						min: 2,
						max: 6,
						message: '长度为 2 到 6 个字符',
						trigger: 'blur'
					},
					{
						validator: letterRule,
						trigger: 'blur'
					}
				],
				studentId: [{
					required: true,
					message: '请输入学号',
					trigger: 'blur'
				},
					{
						min: 10,
						max: 10,
						message: '长度为 10 个数字',
						trigger: 'blur'
					},
					{
						validator: isNum,
						// validator: letterRule,
						trigger: 'blur'
					}
				],
				passWord: [{
					required: true,
					message: '请输入身份证后六位',
					trigger: 'blur'
				},
					{
						min: 6,
						max: 6,
						message: '长度为 6 个字符',
						trigger: 'blur'
					},
					{
						validator: letterRule,
						trigger: 'blur'
					}
				],
				phone: [{
					required: true,
					message: '请输入手机号',
					trigger: 'blur'
				},
					{
						min: 11,
						max: 11,
						message: '长度为 11 个数字',
						trigger: 'blur'
					},
					{
						validator: isNum,
						trigger: 'blur'
					}
				],
				qq: [{
					required: true,
					message: '请输入QQ号',
					trigger: 'blur'
				},
					{
						min: 7,
						max: 13,
						message: '长度为 7 到 13 个数字',
						trigger: 'blur'
					},
					{
						validator: isNum,
						trigger: 'blur'
					}
				],
			},
			show_login: true,
			show_register: false,
		};
	},
	methods: {
		//提交登录
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loading = true
					this.login()
				} else {
					// console.log('error submit!!');
					return false;
				}
			});
		},
		toRegisterForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.loading = true
					this.login()
				} else {
					// console.log('error submit!!');
					return false;
				}
			});
		},
		to_show_login(){
			this.show_login=true;
			this.show_register=false;
		},
		to_show_register(){
			this.show_login=false;
			this.show_register=true;
		},
		login() {
			const params = {
				username: this.loginForm.username,
				password: this.loginForm.password
			};
			login(params).then(res => {
				console.log(res);
				// console.log(res.message);
				this.$store
					.dispatch('user/login', {
						username: this.loginForm.username
					})
					.then(() => {
						this.loading = true
						// 登陆成功后重定向
						this.$router.push({
							path: this.$route.query.redirect || '/index'
						})
					})
					.catch(err => {
						this.loading = false
						console.log(err)
					})
			});
		},
		//重复动画
		drawFrame() {
			let animation = requestAnimationFrame(this.drawFrame);
			this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			this.createStar(false);
			this.stars.forEach(this.moveStar);
		},
		//展示所有的星星
		createStar(params) {
			let now = new Date();
			if (params) {
				//初始化星星
				for (var i = 0; i < 50; i++) {
					const radius = Math.random() * 3 + 2;
					let star = new this.Ball(radius);
					star.x = Math.random() * this.canvas.width + 1;
					star.y = Math.random() * this.canvas.height + 1;
					star.color = "#ffffff";
					star.shadowColor = this.shadowColorList[
						Math.floor(Math.random() * this.shadowColorList.length)
					];
					star.direction = this.directionList[
						Math.floor(Math.random() * this.directionList.length)
					];
					this.stars.push(star);
				}
			} else if (!params && now - this.last_star_created_time > 3000) {
				//每隔3秒重绘修改颜色其中30个球阴影颜色
				for (var i = 0; i < 30; i++) {
					this.stars[i].shadowColor = this.shadowColorList[
						Math.floor(Math.random() * this.shadowColorList.length)
					];
				}
				this.last_star_created_time = now;
			}
		},
		//移动
		moveStar(star, index) {
			if (star.y - this.canvas.height > 0) {
				//触底
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = "leftTop";
				} else {
					star.direction = "rightTop";
				}
			} else if (star.y < 2) {
				//触顶
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = "rightBottom";
				} else {
					star.direction = "leftBottom";
				}
			} else if (star.x < 2) {
				//左边
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = "rightTop";
				} else {
					star.direction = "rightBottom";
				}
			} else if (star.x - this.canvas.width > 0) {
				//右边
				if (Math.floor(Math.random() * 2) === 1) {
					star.direction = "leftBottom";
				} else {
					star.direction = "leftTop";
				}
			}
			if (star.direction === "leftTop") {
				star.y -= star.radius / this.speed;
				star.x -= star.radius / this.speed;
			} else if (star.direction === "rightBottom") {
				star.y += star.radius / this.speed;
				star.x += star.radius / this.speed;
			} else if (star.direction === "leftBottom") {
				star.y += star.radius / this.speed;
				star.x -= star.radius / this.speed;
			} else if (star.direction === "rightTop") {
				star.y -= star.radius / this.speed;
				star.x += star.radius / this.speed;
			}
			star.draw(this.context);
		}
	},
	mounted() {
		this.canvas = document.getElementById("myCanvas");
		this.context = this.canvas.getContext("2d");
		this.createStar(true);
		this.drawFrame();
	}
})
